// 导入React核心功能
import React, { useState, useEffect } from 'react'
// 导入组件样式
import styles from './Drawer.module.scss'
// 导入Ant Design组件
import { Button, Drawer, Space, App } from 'antd'
// 导入Ant Design抽屉组件类型
import type { DrawerProps } from 'antd'
// 导入考试和题目类型定义
import type { QuestionList, ExaminationDetail } from '@/service/type'
// 导入PDF导出hook
import { usePDF } from 'react-to-pdf'

/**
 * 定义组件props接口
 * open - 控制抽屉显示状态
 * detailData - 考试详情数据
 * setOpen - 设置抽屉显示状态的函数
 */
interface Props {
  open: boolean
  detailData: ExaminationDetail | null
  setOpen: (open: boolean) => void
}

// 试卷预览抽屉组件
const DrawerPaper: React.FC<Props> = ({ open, setOpen, detailData }) => {
  // 抽屉位置状态，固定为右侧
  const [placement] = useState<DrawerProps['placement']>('right')
  // 存储单选题列表
  const [choice, setChoice] = useState<QuestionList[]>([])
  // 存储多选题列表
  const [choices, setChoices] = useState<QuestionList[]>([])
  // 存储判断题列表
  const [tof, setTof] = useState<QuestionList[]>([])
  // PDF导出hook配置
  const { toPDF, targetRef } = usePDF({ filename: '试卷.pdf' })

  // 关闭抽屉的回调函数
  const onClose = () => {
    setOpen(false)
  }

  // 根据题目类型分类题目数据
  useEffect(() => {
    // console.log(detailData)
    // 筛选单选题(type=1)
    if (detailData) {
      console.log(detailData?.questionsList[0].options.length)
      setChoice(detailData?.questionsList?.filter(item => item.type === 'single') || [])
      // 筛选多选题(status=2)
      setChoices(detailData?.questionsList?.filter(item => item.type === 'fill') || [])
      // 筛选判断题(status=3)
      setTof(detailData?.questionsList?.filter(item => item.type === 'essay') || [])
    }
    // console.log(detailData?.questionsList?.filter(item => item.status === 1))
    // console.log(choice, choices, tof)
  }, [detailData])

  /**
   * 渲染题目列表
   * @param question 题目数组
   * @returns 渲染后的题目列表JSX
   */
  const renderQuestions = (question: QuestionList[]) => {
    return (
      question.length === 0 ? <h4>暂无题目</h4> : (
        <ul>
          {/* 根据题目类型显示不同标题 */}
          <h3>{question[0]?.type === 'single' ? '单选题' : question[0]?.type === 'essay' ? '判断题' : '简答题'}</h3>
          {/* 遍历题目数组 */}
          {question.length < 1 ? <li>无</li> : question?.map((item, index) => (
            <li key={item._id}>
              {/* 题目序号和内容 */}
              <h4>{index + 1} . {item.title}</h4>
              {/* 选项列表 */}
              <ul className={styles.options}>
                {item.options.map((option, i) => (
                  <li key={i}>{String.fromCharCode(i + 65)}:{option.content}</li> // 将选项索引转为字母(A,B,C...)
                ))}
              </ul>
            </li>
          ))}
        </ul>
      )
    )
  }

  // 组件渲染
  return (
    <App>
      <div>
        {/* Ant Design抽屉组件 */}
        <Drawer
          title="试卷预览"  // 抽屉标题
          placement={placement}  // 抽屉位置
          width={660}  // 抽屉宽度
          onClose={onClose}  // 关闭回调
          open={open}  // 控制显示状态
          getContainer={false}  // 不挂载到父容器
          extra={
            <Space>
              {/* 导出PDF按钮 */}
              <Button onClick={() => toPDF()}>导出PDF</Button>
              {/* 确认按钮 */}
              <Button type="primary" onClick={onClose}>OK</Button>
            </Space>
          }
        >
          {/* PDF导出目标元素 */}
          <div ref={targetRef} className={styles.drawerContent}>
            {/* 试卷标题 */}
            <h2>{detailData?.name}</h2>
            {/* 考试科目 */}
            <p>考试科目：{detailData?.classify.name}</p>
            {/* 渲染各类题目 */}
            {choice.length > 0 && renderQuestions(choice)}
            {choices.length > 0 && renderQuestions(choices)}
            {tof.length > 0 && renderQuestions(tof)}
          </div>
        </Drawer>
      </div>
    </App>
  )
}

// 默认导出抽屉组件
export default DrawerPaper
